<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
		<swiper class="swiper-box" @change="change">
			<swiper-item v-for="(item1 ,index1) in info" :key="index1" class="swiper-item1">

				<view v-for="(item2, index2) in item1" :key="index2" class="swiper-item2">
					<view class="">
						{{item2.title}}
					</view>
				</view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>
<script>
	export default {
		data() {
			return {
				info: [
					[{

						title: '内容1',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容2',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容3',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容4',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容5',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容6',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容7',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容8',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容9',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容10',
						icon: '/staic/index/q1.jpg'
					}],
					[{

						title: '内容1',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容2',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容3',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容4',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容5',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容6',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容7',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容8',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容9',
						icon: '/staic/index/q1.jpg'
					}, {
						title: '内容10',
						icon: '/staic/index/q1.jpg'
					}]
				],
				current: 0,
				mode: 'round',
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.swiper-box{
		// border: 1px solid darkred;
		
	}
	.swiper-item1 {
		margin: 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; 
		padding: 0px;

	}

	.swiper-item2 {
		padding: 15px;
		margin: 3px;
		border: 1px solid #ddd;
		float: left;
		display: flex;
		align-items: center;
		width: 7%;		
		height: 30px;
	}
</style>